<script setup>
import {ref} from "vue";
import {Location} from "@element-plus/icons-vue";
import UpdatePractice from "../UpdatePractice.vue";
import InsertTask from "./InsertTask.vue";

// 题目类型
const types = ['单选题', '多选题', '判断题', '填空题', '问答题'];
// 题量
const practiceNum = ref(0);
// 是否显示增加题目弹窗
const isInsertTask = ref(false);
// 题目数组(二维数组)
const practices = ref([]);
// 单选选项
const radioOptions = ref([{
  value: 'A',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'B',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'C',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'D',
  content: '',
  checked: 0
}]);
//多选选项
const checkboxOptions = ref([{
  value: 'A',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'B',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'C',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'D',
  content: '',
  checked: 0
}])
// 判断题选项
const judgeOptions = ref([{
  value: 'T',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'F',
  content: '',
  checked: 0 // 选项未选中状态
}])

// 当前题目
const practice = ref({
  answer: '',
  content: "",
  id: 0,
  type: 0,
})
const option = ref({
  assignmentQuestionId: 0,
  a: '',
  b: '',
  c: '',
  d: ''
})
const isOption = () => {
  if(practice.value.type===0){
    // console.log("单选");
    option.value.a=radioOptions.value[0].content;
    option.value.b=radioOptions.value[1].content;
    option.value.c=radioOptions.value[2].content;
    option.value.d=radioOptions.value[3].content;
    return true;
  }
  else if(practice.value.type===1){
    // console.log("多选");
    option.value.a=checkboxOptions.value[0].content;
    option.value.b=checkboxOptions.value[1].content;
    option.value.c=checkboxOptions.value[2].content;
    option.value.d=checkboxOptions.value[3].content;
    return true;
  }
  else if(practice.value.type===2){
    // console.log("判断");
    option.value.a=judgeOptions.value[0].content;
    option.value.b=judgeOptions.value[1].content;
    return true;
  }
  else return false;
}
// 当前点击元素
const activeIndex = ref('')
// 添加题目
const handleAddPractice = (item) => {
  // console.log(practices.value.map(practice => practice.type));
  if (!practices.value.map(practice => practice.type).includes(item)) {
    practices.value.push({
      type: item,
      content: [{
        answer: [],
        content: "",
        id: 0,
        type: 0,
      }]
    })
    // console.log(practices.value);
  } else {
    practices.value[practices.value.map(practice => practice.type).indexOf(item)].content.push({
      answer: [],
      content: "",
      id: 0,
      type: 0,
    });
  }
  practiceNum.value++;
}

// 编辑题目(type(题目类型)，item题号)
const handleUpdatePractice = (type, index) => {
  // console.log(type, index);
//   先解析索引
  let typeIndex=0;
  let practiceIndex=0;
  if(activeIndex.value===''){
    activeIndex.value=type+'-'+index;
    typeIndex=practices.value.map(practice => practice.type).indexOf(type);
    if(isOption()){
      // console.log(practices.value[typeIndex])
      practices.value[typeIndex].content[index]['option']={};
      Object.assign(practices.value[typeIndex].content[index]['option'],option.value);
    }
    // console.log(practices.value);
  }
  else {
    let arr = activeIndex.value.split('-');
    console.log(arr);
    typeIndex = practices.value.map(practice => practice.type).indexOf(Number(arr[0]));
    practiceIndex = Number(arr[1]);
    console.log(typeIndex,practiceIndex);
    // 题目赋值
    Object.assign(practices.value[typeIndex].content[practiceIndex],practice.value);
    // 选项赋值
    if(isOption()){
      practices.value[typeIndex].content[practiceIndex]['option']={};
      Object.assign(practices.value[typeIndex].content[practiceIndex]['option'],option.value);
    }
    //   改变索引
    activeIndex.value=type+'-'+index;
  }
  // 当前题目赋值
  handleGetPractice(type, index);
  console.log(practices.value);
}

// 获取状态
const handleGetChecked= (answer)=> {
  // 单选
  if (practice.value.type === 0) {
    // 先全部清空状态
    radioOptions.value.map(item => item.checked = 0);
    const index = radioOptions.value.map(item => item.value).indexOf(answer[0]);
    console.log(index);
    radioOptions.value[index].checked = 1;
  }
  // 多选
  else if (practice.value.type === 1) {
    // 先全部清空状态
    checkboxOptions.value.map(item => item.checked = 0);
    for (let i = 0; i < answer.length; i++) {
      const index = checkboxOptions.value.map(item => item.value).indexOf(answer[i]);
      console.log(index);
      checkboxOptions.value[index].checked = 1;
    }
  }
  // 判断
  else if (practice.value.type === 2) {
    // 先全部清空状态
    judgeOptions.value.map(item => item.checked = 0);
    const index = judgeOptions.value.map(item => item.value).indexOf(answer[0]);
    console.log(index);
    judgeOptions.value[index].checked = 1;
  }
}


// 获取当前题目
const handleGetPractice = (type, index) => {
  practice.value.type=type;
  let typeIndex=practices.value.map(practice => practice.type).indexOf(type);
  practice.value.content=practices.value[typeIndex].content[index].content;
  practice.value.answer=practices.value[typeIndex].content[index].answer;
  console.log(practice.value);
  // console.log(Reflect.has(practices.value[type].content[index],'option'))

  if(isOption()){
    handleGetOption(type,index);
    // 通过答案给状态
    handleGetChecked(practice.value.answer);
  }
}

// 获取当前题目选项
const handleGetOption = (type, index) => {
  // console.log(Reflect.has(practices.value[type].content[index],'option'))
  let typeIndex=practices.value.map(practice => practice.type).indexOf(type);
  if(Reflect.has(practices.value[typeIndex].content[index],'option')){
    Object.assign(option.value,practices.value[typeIndex].content[index].option);
  }
  else{
    option.value.a='';
    option.value.b='';
    option.value.c='';
    option.value.d='';
  }
  assignOption();
}
// 选项赋值
const assignOption = () => {
  console.log(option.value);
  if (practice.value.type === 0) {
    radioOptions.value[0].content = option.value.a;
    radioOptions.value[1].content = option.value.b;
    radioOptions.value[2].content = option.value.c;
    radioOptions.value[3].content = option.value.d;
  } else if (practice.value.type === 1) {
    checkboxOptions.value[0].content = option.value.a;
    checkboxOptions.value[1].content = option.value.b;
    checkboxOptions.value[2].content = option.value.c;
    checkboxOptions.value[3].content = option.value.d;
  } else if (practice.value.type === 2) {
    judgeOptions.value[0].content = option.value.a;
    judgeOptions.value[1].content = option.value.b;
  }
}

// 关闭弹窗
const handleCloseInsertTask=()=>{
  isInsertTask.value=false;
}

// 保存并发布题目
const handleInsertAssignment=()=>{
  let arr = activeIndex.value.split('-');
  const typeIndex = practices.value.map(practice => practice.type).indexOf(Number(arr[0]));
  const practiceIndex = Number(arr[1]);
  console.log(typeIndex,practiceIndex);
  Object.assign(practices.value[typeIndex].content[practiceIndex],practice.value);
  // 选项赋值
  if(isOption()){
    practices.value[typeIndex].content[practiceIndex]['option']={};
    Object.assign(practices.value[typeIndex].content[practiceIndex]['option'],option.value);
  }
  console.log(practices.value);
  isInsertTask.value=true;
}

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background: #3a4357;height: 10vh">
        <div style="display: flex; align-items: center; height: 100%;">
          <!--        居中-->
          <span style="color: white;margin-left: 50%">新建随堂练习</span>
          <!--        靠右-->
          <el-button type="primary" style="margin-left: auto;margin-right: 10px" @click="handleInsertAssignment">保存并发布</el-button>
        </div>
      </el-header>
      <el-container>

        <el-aside width="300px" style="height: 90vh;margin-left: 60px">
          <div style="display: flex;margin-top: 30px">
            <!--            -->
            <el-card style="min-height: 82vh;width: 300px;border-radius: 12px">
              <div>
                <span>题量{{practiceNum}}</span>
              </div>
              <el-menu
                  class="el-menu-vertical-demo"
                  :default-openeds="[practice.type]"
                  :default-active="activeIndex"
                  v-for="(practice,index) in practices"
              >
                <el-sub-menu :index="practice.type">
                  <template #title>
                    <el-icon>
                      <location/>
                    </el-icon>
                    <span>{{ types[practice.type] }}</span>
                  </template>
                  <el-menu-item :index="practice.type+'-'+index" v-for="(item,index) in practice.content"
                                @click="handleUpdatePractice(practice.type,index)">{{ index+1 }}
                  </el-menu-item>
                </el-sub-menu>
              </el-menu>
            </el-card>
          </div>
        </el-aside>

        <el-main style="height: 90vh">
          <!-- 修改为垂直排列的Flex布局 -->
          <div
              style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
            <!-- 添加题目卡片 -->
            <el-card style="height: 10vh; width: 1100px;margin-bottom: 20px;border-radius: 12px">
              <div>
                <span style="margin-right: 20px">添加题目</span>
                <el-button v-for="(type,index) in types" style="border-radius: 20px" @click="handleAddPractice(index)">
                  {{ type }}
                </el-button>
              </div>
            </el-card>
            <!-- 编辑题目卡片 -->
            <el-card style="height: 70vh; width: 1100px;border-radius: 12px">
              <div style="display: flex; justify-content: center; align-items: center;height: 70vh" v-if="activeIndex===''">
                <span>点击题型添加题目</span>
              </div>
              <div v-if="activeIndex!==''">
                <el-form
                    :label-position="'top'"
                    label-width="auto"
                    :model="practice"
                    style="max-width: 900px"
                >
                  <el-form-item label="题目内容">
                    <el-input
                        v-model="practice.content"
                        :rows="8"
                        type="textarea"
                        placeholder="请输入题目内容"
                    />
                  </el-form-item>
                  <UpdatePractice :practice="practice" :radioOptions="radioOptions" :judge-options="judgeOptions"
                                  :checkbox-options="checkboxOptions">
                  </UpdatePractice>
                </el-form>
              </div>
            </el-card>
          </div>
<!--          <InsertAssignment  v-model="isInsertAssignment" @close="handleCloseInsertAssignment" :practice="practice" :practices="practices"></InsertAssignment>-->
          <InsertTask v-model="isInsertTask" @close="handleCloseInsertTask" :practices="practices" :type="1"></InsertTask>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped lang="less">

</style>